<template>
    <div>
        <Table :columns="columns" :paginatedData="paginatedData" :isFixedColumn ="false"
         :columnWidth="160" :isMore="false" :tableLoading="loading" :total="total"
            @pageSize="handlePageSize" @currentPage="handleCurrentPage">
        </Table>
    </div>
</template>

<script setup lang='ts' name="feedback">
import { ref, reactive, onMounted } from 'vue'
import Table from '@/components/Table.vue';
import { feedback } from "@/api/feedback/feedback.ts"
// 表格相关 开始
const loading = ref(false)
// 表头数据
const columns = ref([
    { prop: 'dpl_id', label: '用户ID', width: 160 },
    { prop: 'user_name', label: '用户名', width: 190 },
    { prop: 'option', label: '操作行为', width: 260 },
    { prop: 'expiration_time', label: '处罚过期时间', width: 220 },
    { prop: 'option_time', label: '操作时间', width: 220 },
    { prop: 'option_reason', label: '操作理由', width: "" }
]);
// 表格数据
const paginatedData = ref([]);
// 查询条件
const formBtnList = reactive({
    search: '',
    page_size: 10,
    page: 1,
})
const total = ref(0)
// 查询
const handInquire = () => {
    loading.value = true
    feedback(formBtnList).then((res: any) => {
        if (res.code === 200) {
            total.value = res.data.total
            if (res.data.total === 0) {
                paginatedData.value = []
                ElMessage.error(`反馈内容不存在`)
                return
            }
            const processedData = res.data.feedbacks.map((item:any) => {
                return {
                    ...item
                };
            });
            paginatedData.value = processedData
        } else {
            paginatedData.value = []
            ElMessage.error(`请求错误: ${res.msg}`)
        }
    }).catch((error: any) => {
        ElMessage.error(`请求错误: ${error.msg}`)
    }).finally(() => {
        loading.value = false
    })
}

// 分页事件触发
const handlePageSize = (pageSize: number) => {// 每页大小
    // console.log('handlePageSize', pageSize);
    formBtnList.page_size = pageSize
    handInquire()
};
const handleCurrentPage = (currentPage: number) => {// 页码
    // console.log('handleCurrentPage', currentPage);
    formBtnList.page = currentPage
    handInquire()
};
// 表格相关 结束

onMounted(() => {
    // handInquire()
})
</script>
<style lang='scss' scoped>
.demo-form-inline {
    .el-input {
        width: 265px;

    }

    :deep(.el-input__wrapper) {
        border-radius: 20px;
    }

}
</style>